<template>
  <van-tabs :active="activeIndex" @change="typeTabClick" color="#f8c400" :border="false">
    <div v-for="(item, index) in goodsTypes" :key="index" >
      <van-tab :title="item.typeName" title-style="font-size:32rpx;"></van-tab>
    </div>
  </van-tabs>
</template>

<script>
  export default {
    data() {
      return {
        isComponents: true,
        goodsTypes: [{
          typeName: '实物商品'
        }, {
          typeName: '服务商品'
        }]
      }
    },
    props: {
      activeIndex: {
        type: Number,
        default: 0
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
    },
    methods: {
      typeTabClick(e) {
        this.activeIndex = e.mp.detail.index
        this.setTypeName()
      },
      setTypeName() {
        let typeName = ''
        if (this.goodsTypes.length > 0) {
          typeName = this.goodsTypes[this.activeIndex].typeName
        }
        this.$emit('typeTabClick', typeName, this.activeIndex)
      }
    }
  }
</script>

<style scoped>

</style>
